<template>
  <div class="news">
<!--    导航区-->
    <ul>
      <li v-for="item in newList" :key="item.id">
<!--        第一种传参-->
<!--        <router-link :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link>-->
<!--        第二种传参-->
        <router-link :to="{
          name: 'xiangqing',
          query: {
            id: item.id,
            title: item.title,
            content: item.content,
          }
        }">{{item.title}}</router-link>
      </li>
    </ul>
<!--    展示区-->
    <div class="news-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";

const newList = reactive([
  {id: 1, title: '新闻1', content:'内容1'},
  {id: 2, title: '新闻2', content:'内容2'},
  {id: 3, title: '新闻3', content:'内容3'},
])

</script>

<style scoped>

</style>